<template>
  <div>
    <div class="Y4page">
            <div class="Y4head">
                <img src="../assets/img/箭头.png" alt="" width="20px" height="20px" @click="goBank">               
                <span>银行卡管理</span>
            </div>
            <div class="Y4body" v-for="(item,index) in Y4Bankcard" :key="index" @click="card">
                <div class="Y4Bankcard1">
                    <div class="Y4Bankcard-Num">我的银行卡( <span id="Y4two">{{ num }}</span> 张)</div>
                    <div class="Y4Bankcard"  >
                        <div class="Y4Bankcard-Card" >
                            <img src="../assets/img/银行.png" alt="" width="50px" height="50px" style="margin-right: 2px;">
                            <div class="Y4Bankcard-word">
                            <p>中国万荣银行</p>
                            <p id="Y4ka">{{item.cardType}}</p>
                            <p id="Y4num">{{item.hideCardNum}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Y4add">
                        <p class="Y4add-one">+ 添加银行卡</p>
                        <p class="Y4add-two">支持绑定多家银行卡</p>
                    
                </div>
                <div class="Y4tail">
                    <div class="Y4tail-left">
                        <p>信用卡</p>
                        <button class="Y4button">立即申请</button>
                        <img src="../assets/img/信用卡认证.png" alt="" width="40px" height="40px">
                    </div>
                    <div class="Y4tail-right">
                        <p>电子账户</p>
                        <button class="Y4button">立即申请</button>
                        <img src="../assets/img/取钱.png" alt="" width="40px" height="40px">
                    </div>
                </div>
            </div>
        </div>       
  </div>
</template>

<script>
import { Dialog } from 'vant';
import { ff } from "../api/Management";
export default {
    data(){
        return{
            Y4Bankcard:[],
            num:"",
            hideCardNum:""
        }
    },
    methods:{
        fun(){
            ff().then((res)=>{
                if(res.code == 200){
                    this.num=res.data[0].cardCount
                    this.Y4Bankcard=res.data;
                    this.hideCardNum = res.data[0].hideCardNum
                }else{
                    Dialog({ title: "温馨提示", message: res.msg });
                }
            }).catch((err)=>{
                console.log(err);
            })
        },
        card(){
            this.$router.push({
                    name: "Detailpage",
                    params: {
                        cardNUm:this.hideCardNum,
                    },
                  });
        },
        goBank(){
            this.$router.push({
                name:"All"
            })
        }
    },
    created(){
        this.fun()
    }
}
</script>

<style scoped src="../assets/css/management.css">

</style>